<template>
  <!-- 编辑弹出框 -->
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" width="50%">
    <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="70px">
      <el-form-item label="用户Id"><el-input v-model="dataForm.id" :disabled="true"></el-input></el-form-item>
      <el-form-item label="用户名"><el-input v-model="dataForm.name"></el-input></el-form-item>
      <el-form-item label="邮件"><el-input v-model="dataForm.email" /></el-form-item>
      <el-form-item label="电话"><el-input v-model="dataForm.phone" /></el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="dataForm.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="昵称"><el-input v-model="dataForm.nick_name" /></el-form-item>
      <el-form-item label="头像"><upload-single-image :value.sync="dataForm.avatar"></upload-single-image></el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as UserAPI from '@/api/user.js';
import UploadSingleImage from '@/components/Upload/UploadSingleImage';
export default {
  name: 'UserEdit',
  components: {
    UploadSingleImage //注册单图片上传组件
  },

  data() {
    return {
      dialogVisible: false, //是否显示
      dataForm: {
        id: 0
      },
      //数据校验规则，后续继续完善
      rules: {
        name: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '手机号不能为空',
            trigger: 'change'
          }
        ],
        email: [
          {
            required: true,
            message: '邮箱不能为空',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {
    //弹框标题
    dialogTitle() {
      return !this.dataForm.id ? '新增' : '编辑';
    }
  },

  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields();
        if (id) {
          //是编辑
          UserAPI.getDetailById(id).then(result => {
            this.dataForm = result.data;
          });
        } else {
          //是新增
          this.setDataFormToDefault();
        }
      });
    },

    // 确认提交
    handleSubmit() {
      //注意：要确保this.dataForm的属性和后端的表字段一致
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          UserAPI.updateUser(this.dataForm).then(() => {
            this.$message.success(`保存成功`);
            this.dialogVisible = false;
            this.$emit('refreshDataList');
          });
        }
      });
    },

    setDataFormToDefault() {
      //初始默认值
      let defaultForm = {};
      defaultForm.id = 0;
      defaultForm.name = '';
      defaultForm.phone = '';
      defaultForm.email = '';
      defaultForm.nick_name = '';
      defaultForm.avatar = '';
      defaultForm.gender = 1;
      this.dataForm = Object.assign({}, defaultForm);
    }
  }
};
</script>

<style scoped></style>
